<template>
	<view class="container">
		<view>
			<drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick"></drag-button>
		</view>

		<view class="ui-all">
			<!-- 	<view class="avatar" @tap="avatarChoose">
				<view  class="imgAvatar">
					<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view>
				</view>
				<text v-if="avater">修改头像</text>
				<text v-if="!avater">授权微信</text>
				<button v-if="!avater" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
			</view> -->
			<view class="ui-list right">
				<text>年级</text>
				<picker @change="bindGardeChange" mode='selector' range-key="name" :value="gradIndex"
					:range="garde">
					<view class="picker">
						{{garde[gradIndex].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>辅导员</text>
				<picker @change="bindTeacherChange" mode='selector' range-key="name" :value="teacherIndex"
					:range="teacher">
					<view class="picker">
						{{teacher[teacherIndex].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>班级</text>
				<picker @change="bindClassChange" mode='selector' range-key="name" :value="classIndex" :range="classes">
					<view class="picker">
						{{classes[classIndex].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list">
				<text>姓名</text>
				<input type="text" :placeholder="value" v-model="student.name" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>学号</text>
				<input type="text" :placeholder="value" v-model="student.student_id" placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<input type="text" :placeholder="value" v-model="student.phone" placeholder-class="place" />
			</view>
			<!-- 	<view class="ui-list right">
				<text>常住地</text>
				<picker @change="bindRegionChange" mode='region'>
					<view class="picker">
						{{region[0]}} {{region[1]}} {{region[2]}}
					</view>
				</picker>
			</view> -->
			<!-- 	<view class="ui-list right">
				<text>生日</text>
				<picker mode="date" :value="date" @change="bindDateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view> -->
			<!-- <view class="ui-list">
				<text>签名</text>
				<textarea :placeholder="value" placeholder-class="place" :value="description" @input="binddescription"></textarea>
			</view> -->
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>

	</view>
</template>

<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	export default {
		components: {
			dragButton
		},
		data() {
			return {
				student:{
					wx_open_id:"",
					name:"",
					student_id:"",
					phone:"",
					class_id:"",
					teacher_id:""
				},
				garde:[{id:1,name:"大一"},{id:2,name:"大二"},{id:3,name:"大三"},{id:4,name:"大四"}],
				teacherIndex:0,
				teacher:[{ID:"",name:"请选择年级"}],
				classIndex:0,
				classes:[{ID:"",name:"请选择老师"}],	
				gradIndex:0,
				value: '请填写',
				open_id: "",
				result: {
					token: "",
					userID: "",
					userName: ""
				}
			}
		},
		methods: { // 获得open_id
			// 获得open_id
			getOpenid: function() {
				let that = this
				uni.login({
					provider: "weixin",
					success: function(res) {
						that.$myHttp({
							url: '/wx/openid',
							method: "post",
							data: {
								"code": res.code,
							}
						}).then((res) => {
							var result = res.data
							uni.setStorageSync('open_id', result.data.open_id)
							uni.setStorageSync('session_key', result.data.session_key)
						})
					},
				});
				this.open_id = uni.getStorageSync('open_id');
			},
			btnClick: function() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			//改变年级
			bindGardeChange:function(e){
				let that = this
				this.gradIndex = e.detail.value
				console.log(e.detail.value)
				this.student.garde=this.garde[e.detail.value].id
				//获得辅导员
				this.$myHttp({
					url: '/teacher/wx/info ',
					method: "post",
					data: {
						"grade": this.student.garde,
					}
				}).then((res) => {
					let result = res.data.data
					that.teacher=result
				
				})
			},
			bindTeacherChange: function(e) {
				let that  = this
				this.teacherIndex = e.detail.value
				this.student.teacher_id=this.teacher[this.teacherIndex].ID
				// console.log(this.teacher[this.teacherIndex].ID)
				//获得班级
			this.$myHttp({
				url: '/teacher/wx/info/class',
				method: "post",
				data: {
					"teacher_id": this.student.teacher_id,
				}
			}).then((res) => {
				that.classes=res.data.data
			})
			},
			bindClassChange: function(e) {
				this.classIndex = e.detail.value
				this.student.class_id=this.classes[this.classIndex].ID
			},
			//提交信息
			savaInfo() {
				let that = this
				this.student.wx_open_id=this.open_id 
				//判断是否为空
				if (this.student.teacher_id=="") {
					uni.showToast({
						title: '请选择辅导员',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.student.class_id=="") {
					uni.showToast({
						title: '请选择班级',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.student.name=="") {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.student.student_id=="") {
					uni.showToast({
						title: '请输入学号',
						icon: 'none',
						duration: 2000
					});
					return
				}
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.student.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						duration: 1500,
						icon: 'none'
					})
					return
				} else if (!reg.test(this.student.phone)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 1500,
						icon: 'none'
					})
					return
				}
				//请求
				this.$myHttp({
					url: '/student/add/info',
					method: "post",
					data: that.student
				}).then((res) => {
					var result = res.data
					if (result.code == 1019) {
						uni.showToast({
							title: result.msg,
							duration: 1500,
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: "操作成功",
						duration: 3000,
						icon: 'none'
					})
					// 登录成功跳转到个人
					uni.switchTab({
						url: '/pages/home/home'
					})
					return
				})
			},
			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			async updata(datas) {
				//传后台

			},
			imgUpload(file) {
				let that = this;
				uni.uploadFile({
					header: {
						Authorization: uni.getStorageSync('token')
					},
					url: '/api/upload/image', //需传后台图片上传接口
					filePath: file[0],
					name: 'file',
					formData: {
						type: 'user_headimg'
					},
					success: function(res) {
						var data = JSON.parse(res.data);
						data = data.data;
						that.avater = that.url + data.img;

						that.headimg = that.url + data.img;


					},
					fail: function(error) {
						console.log(error);
					}
				});
			},

		},
		created() {
			this.getOpenid()
			//辅导员
			// this.getInstructors()
		}

	}
</script>

<style lang="less">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #030303;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>